<template>
  <div class="mod-config">
    <!-- <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <ve-ring :data="chartData" ref="ring" height="200px" :extend="chartExtend" :settings="chartSettings" :loading="loading" :grid="grid" legend-position="right"></ve-ring>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <ve-waterfall :data="waterfallData" ref="waterfall" :settings="waterfallSettings" :extend="histogramExtend" height="200px" :grid="grid"></ve-waterfall>
        </el-card>
      </el-col>
    </el-row> -->
    <div v-if="!certificateinfoCrashVisible">
      <el-form :inline="true" class="queryForm">
        <el-form-item>
          <el-button size="mini" icon="iconfont iconsoushuo" @click="queryHandle()">搜索</el-button>
          <el-button size="mini" icon="iconfont iconlajixiang" v-if="isAuth('certificate:certificateInfo:delete')" type="danger" @click="certificateinfoCrashHandle()">垃圾箱</el-button>
          <el-button size="mini" type="primary" v-if="isAuth('certificate:certificateInfo:save')" @click="addOrUpdateHandle()">新增</el-button>
        </el-form-item>
      </el-form>
      <el-tabs v-model="activeName" @tab-click="handleClick" >
        <el-tab-pane :label="item.name" :name="item.code" v-for="item in editableTabs" :key="item.code">
          <certificate-type :active-id="activeId" ref="child" :flag="flag" :params="params"></certificate-type>
        </el-tab-pane>
      </el-tabs>
    </div>
    <query-model v-if="queryModelVisible" ref="queryModel" @refreshDataList="setParams"></query-model>
    <certificateinfo-crash v-if="certificateinfoCrashVisible" ref="certificateinfoCrash"></certificateinfo-crash>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate"></add-or-update>
  </div>
</template>

<script>
  import AddOrUpdate from './certificateinfoadd'
  import CertificateType from './../certificate/certinfo/certificate-type'
  import CertificateinfoCrash from './../certificate/certinfo/certificateinfolist-crash'
  import QueryModel from './../certificate/certinfo/query-model'
  // import echarts from 'echarts'
  export default {
    props: {
      activeId: {
        type: Number
      }
    },
    data () {
      this.chartSettings = {
        roseType: 'radius',
        radius: 60,
        offsetY: 100,
        offsetX: 60
      }
      this.toolbox = {
        feature: {
          magicType: {type: ['line', 'bar']},
          saveAsImage: {}
        }
      }
      this.grid = {
        y: 30,
        y2: 0
      }
      this.waterfallSettings = {
        labelMap: {
          'num': '数量'
        }
      }
      return {
        queryModelVisible: false,
        certificateinfoCrashVisible: false,
        addOrUpdateVisible: false,
        activeName: 'all',
        flag: false,
        chartData: {
          columns: ['type', 'num'],
          rows: [
            { 'type': '空闲', 'num': 1393 },
            { 'type': '借出', 'num': 3530 },
            { 'type': '投标中', 'num': 2923 },
            { 'type': '项目中', 'num': 1723 }
          ]
        },
        waterfallData: {
          columns: ['type', 'num'],
          rows: [
            /* { 'type': '尚未注册证书', 'num': 50 }, */
            { 'type': '三个月快到期证书', 'num': 35 },
            { 'type': '已过期证书', 'num': 35 },
            { 'type': '兼职证书', 'num': 60 }
          ]
        },
        chartExtend: {
          color: ['#07AB6E', '#E83E25', '#1B92FB', '#FC8E2D']
        },
        histogramExtend: {
          color: ['#E83E25', '#07AB6E']
        },
        loading: true,
        dataEmpty: true,
        tenantId: '',
        editableTabs: [],
        index: 0,
        params: {}
      }
    },
    components: {
      CertificateType, QueryModel, AddOrUpdate, CertificateinfoCrash
    },
    watch: {
      activeName (n, o) {
        this.$refs.child[this.index].init(n, this.tenantId)
      },
      params () {
        this.$nextTick(() => {
          this.$refs.child[this.index].getDataList()
        })
      }
    },
    methods: {
      init (tenantId) {
        this.tenantId = tenantId
        this.initJobs()
        this.$nextTick(_ => {
         // this.$refs.ring.echarts.resize()
         // this.$refs.waterfall.echarts.resize()
        })
      },
      queryHandle () {
        this.queryModelVisible = true
        this.$nextTick(() => {
          this.$refs.queryModel.init()
        })
      },
      setParams (params) {
        this.params = params
      },
      handleClick (tab, event) {
        this.activeName = tab.name
        this.index = tab.index
      },
      initJobs () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobs'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.editableTabs = data
            this.editableTabs[0].code = 'all'
            setTimeout(() => {
              this.activeName = 'all'
            })
          }
        })
      },
      certificateinfoCrashHandle () {
        this.certificateinfoCrashVisible = true
        this.$nextTick(() => {
          this.$refs.certificateinfoCrash.init(this.tenantId)
        })
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(this.tenantId)
        })
      },
      // 用于垃圾箱组件的返回上级方法
      clickAppear () {
        this.certificateinfoCrashVisible = false
      }
    }
  }
</script>

<style lang="scss">
    .el-card__body {
      padding: 10px 10px;
    }
    .el-tabs__nav-wrap::after{
      content:none
    }
    .queryForm{
      margin-top: 10px;
    }
    .queryForm .el-form-item{
      margin-bottom: 0px;
    }
    .el-button--danger {
      color: #f56c6c;
      background-color: #fff;
      border-color: #f56c6c;
    }
</style>
